<%--
  Created by IntelliJ IDEA.
  User: ZengKe
  Date: 2021/1/13
  Time: 13:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>超市账单管理系统</title>
    <link rel="stylesheet" href="css/public.css"/>
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<!--头部-->
<header class="publicHeader">
    <h1>超市账单管理系统</h1>

    <div class="publicHeaderR">
        <p><span>下午好！</span><span style="color: #fff21b"> ${sessionScope.userSession.userName}</span> , 欢迎你！</p>
        <a href="login.html">退出</a>
    </div>
</header>
<!--时间-->
<section class="publicTime">
    <span id="time">2015年1月1日 11:11  星期一</span>
    <a href="#">温馨提示：为了能正常浏览，请使用高版本浏览器！（IE10+）</a>
</section>
<!--主体内容-->
<section class="publicMian ">
    <div class="left">
        <h2 class="leftH2"><span class="span1"></span>功能列表 <span></span></h2>
        <nav>
            <ul class="list">
                <li ><a href="/BillListServlet">账单管理</a></li>
                <li><a href="/providerServlet">供应商管理</a></li>
                <li id="active"><a href="/userListServlet">用户管理</a></li>
                <li><a href="password.html">密码修改</a></li>
                <li><a href="/loginOut">退出系统</a></li>
            </ul>
        </nav>
    </div>
    <div class="right">
        <div class="location">
            <strong>你现在所在的位置是:</strong>
            <span>用户管理页面 >> 用户添加页面</span>
        </div>
        <div class="providerAdd">
            <form action="/addUserServlet" id="addForm" method="post">
                <!--div的class 为error是验证错误，ok是验证成功-->
                <div class="">
                    <label for="userId">用户编码：</label>
                    <input type="text" name="userId" id="userId"/>
                    <span></span>
                </div>
                <div>
                    <label for="userName">用户名称：</label>
                    <input type="text" name="userName" id="userName"/>
                    <span >*请输入用户名称</span>
                </div>
                <div>
                    <label for="userpassword">用户密码：</label>
                    <input type="text" name="userpassword" id="userpassword"/>
                    <span>*密码长度必须大于6位小于20位</span>

                </div>
                <div>
                    <label for="userRemi">确认密码：</label>
                    <input type="text" name="userRemi" id="userRemi"/>
                    <span>*请输入确认密码</span>
                </div>
                <div>
                    <label >用户性别：</label>

                    <select name="gender">
                        <option value="2">男</option>
                        <option value="1">女</option>
                    </select>
                    <span></span>
                </div>
                <div>
                    <label for="data">出生日期：</label>
                    <input type="date" name="data" id="data"/>
                    <span >*</span>
                </div>
                <div>
                    <label for="userphone">用户电话：</label>
                    <input type="text" name="userphone" id="userphone"/>
                    <span >*</span>
                </div>
                <div>
                    <label for="userAddress">用户地址：</label>
                    <input type="text" name="userAddress" id="userAddress"/>
                </div>
                <div>
                    <label >用户角色：</label>
                    <%--<input type="radio" name="userlei" value="1"/>管理员
                    <input type="radio" name="userlei" value="2"/>经理
                    <input type="radio" name="userlei" value="3"/>普通用户--%>
                    <select name="role" id="role">
                    </select>
                </div>
                <div class="providerAddBtn">
                    <!--<a href="#">保存</a>-->
                    <!--<a href="userList.html">返回</a>-->
                    <input type="button" id="btn" value="保存"/>
                    <input type="button" value="返回" onclick="history.back(-1)"/>
                </div>
            </form>
        </div>

    </div>
</section>
<footer class="footer">
    版权归千锋教育,本次项目由袁祺炜、曾轲、周启轩、王嘉杰、王政共同完成
</footer>
<script src="js/time.js"></script>
<script type="text/javascript" src="js/jquery.js"> </script>
<script type="text/javascript">
    var userCode;
    var btn;
    $(function () {
        //ajax 异步刷新----->自动请求到servlet
        //页面请求的方式有2种， 1. get  2.post
        $.ajax({
            url: "/showRole", //请求的地址
            data:{},
            type:"get",
            dataType:"json",
            success:function (data) {
                for (var i=0;i<data.length;i++){
                    $("#role").append("<option value='"+data[i].id+"'>"+data[i].roleName+"</option>");
                }
            },
            error:function (a) {  //错误返回的结果

            }
        });
        userCode=$("#userId");
        //当文本框失去焦点时,触发的事件
        userCode.blur(function () {
            $.ajax({
                url: "/userCodeServlet", //请求的地址
                data:{userCode:userCode.val()},
                type:"get",
                dataType:"json",
                success:function (data) {
                    if(data.userCode=="exit"){//已经存在
                        userCode.next().html("用户编码已经存在");
                        userCode.next().css("color","red");
                        //给文本框动态添加一个属性
                        userCode.attr("status","false");
                    }else{
                        userCode.next().html("用户编码不存在");
                        userCode.next().css("color","green");
                        userCode.attr("status","true");
                    }
                }
            });

        });
        btn=$("#btn");

        btn.click(function () {

            if(userCode.attr("status") !="true"){
                //不能提交
                userCode.blur();
            }else{
                //可以提交
                $("#addForm").submit();
            }
        });


    });
</script>


</body>
</html>

<%--2021.01.14--%>
<%--<%@ page contentType="text/html;charset=UTF-8" language="java" %>--%>
<%--<!DOCTYPE html>--%>
<%--<html>--%>
<%--<head lang="en">--%>
<%--    <meta charset="UTF-8">--%>
<%--    <title>超市账单管理系统</title>--%>
<%--    <link rel="stylesheet" href="css/public.css"/>--%>
<%--    <link rel="stylesheet" href="css/style.css"/>--%>
<%--</head>--%>
<%--<body>--%>
<%--<!--头部-->--%>
<%--<header class="publicHeader">--%>
<%--    <h1>超市账单管理系统</h1>--%>
<%--    <div class="publicHeaderR">--%>
<%--        <p><span>下午好！</span><span style="color: #fff21b">${sessionScope.userSession.userName}</span> , 欢迎你！</p>--%>
<%--        <a href="/loginOut">退出</a>--%>
<%--    </div>--%>
<%--</header>--%>
<%--<!--时间-->--%>
<%--<section class="publicTime">--%>
<%--    <span id="time">2015年1月1日 11:11 星期一</span>--%>
<%--    <a href="#">温馨提示：为了能正常浏览，请使用高版本浏览器！（IE10+）</a>--%>
<%--</section>--%>
<%--<!--主体内容-->--%>
<%--<section class="publicMian ">--%>
<%--    <div class="left">--%>
<%--        <h2 class="leftH2"><span class="span1"></span>功能列表 <span></span></h2>--%>
<%--        <nav>--%>
<%--            <ul class="list">--%>
<%--                <li ><a href="billList.html">账单管理</a></li>--%>
<%--                <li><a href="providerList.jsp">供应商管理</a></li>--%>
<%--                <li><a href="/userListServlet">用户管理</a></li>--%>
<%--                <li><a href="password.html">密码修改</a></li>--%>
<%--                <li><a href="/loginOut">退出系统</a></li>--%>
<%--            </ul>--%>
<%--        </nav>--%>
<%--    </div>--%>
<%--    <div class="right">--%>
<%--        <div class="location">--%>
<%--            <strong>你现在所在的位置是:</strong>--%>
<%--            <span>用户管理页面 >> 用户添加页面</span>--%>
<%--        </div>--%>
<%--        <div class="providerAdd">--%>
<%--            <form action="/addUserServlet">--%>
<%--                <!--div的class 为error是验证错误，ok是验证成功-->--%>
<%--                <div class="">--%>
<%--                    <label for="userId">用户编码：</label>--%>
<%--                    <input type="text" name="userId" id="userId"/>--%>
<%--                    <span>*请输入用户编码，且不能重复</span>--%>
<%--                </div>--%>
<%--                <div>--%>
<%--                    <label for="userName">用户名称：</label>--%>
<%--                    <input type="text" name="userName" id="userName"/>--%>
<%--                    <span >*请输入用户名称</span>--%>
<%--                </div>--%>
<%--                <div>--%>
<%--                    <label for="userpassword">用户密码：</label>--%>
<%--                    <input type="text" name="userpassword" id="userpassword"/>--%>
<%--                    <span>*密码长度必须大于6位小于20位</span>--%>
<%--                </div>--%>
<%--                <div>--%>
<%--                    <label for="userRemi">确认密码：</label>--%>
<%--                    <input type="text" name="userRemi" id="userRemi"/>--%>
<%--                    <span>*请输入确认密码</span>--%>
<%--                </div>--%>
<%--                <div>--%>
<%--                    <label >用户性别：</label>--%>
<%--                    <select name="gender">--%>
<%--                        <option value="2">男</option>--%>
<%--                        <option value="1">女</option>--%>
<%--                    </select>--%>
<%--                    <span></span>--%>
<%--                </div>--%>
<%--                <div>--%>
<%--                    <label for="data">出生日期：</label>--%>
<%--                    <input type="date" name="data" id="data"/>--%>
<%--                    <span >*</span>--%>
<%--                </div>--%>
<%--                <div>--%>
<%--                    <label for="userphone">用户电话：</label>--%>
<%--                    <input type="text" name="userphone" id="userphone"/>--%>
<%--                    <span >*</span>--%>
<%--                </div>--%>
<%--                <div>--%>
<%--                    <label for="userAddress">用户地址：</label>--%>
<%--                    <input type="text" name="userAddress" id="userAddress"/>--%>
<%--                </div>--%>
<%--                <div>--%>
<%--                    <label >用户类别：</label>--%>
<%--                    <input type="radio" name="userlei" value="1"/>管理员--%>
<%--                    <input type="radio" name="userlei" value="2"/>经理--%>
<%--                    <input type="radio" name="userlei" value="3"/>普通用户--%>
<%--                </div>--%>
<%--                <div class="providerAddBtn">--%>
<%--                    <!--<a href="#">保存</a>-->--%>
<%--                    <!--<a href="userList.html">返回</a>-->--%>
<%--                    <input type="submit" value="保存"/>--%>
<%--                    <input type="button" value="返回"--%>
<%--                           onclick="history.back(-1)"/>--%>
<%--                </div>--%>
<%--            </form>--%>
<%--        </div>--%>
<%--    </div>--%>
<%--</section>--%>
<%--<footer class="footer">--%>
<%--    版权归千锋教育--%>
<%--</footer>--%>
<%--<script src="js/time.js"></script>--%>
<%--</body>--%>
<%--</html>--%>
